<template>
	<view class="common-card">
		<image class="common-card_bg" src="/static/card_header.png"></image>
		<view class="common-card_text">
			{{header}}
		</view>
		<view class="common-card_right">
			<view class="right_seach" v-if="type.includes(1)">
				<picker mode="date" :fields="['year']" :value="date" :start="startYear" :end="endYear"
					@change="bindDateChange">
					<view class="picker">{{date}}年至今</view>
				</picker>
				<view class="triangle"></view>
			</view>
			<view class="right_seach" v-if="type.includes(2)">
				<view>{{type2T}}</view>
				<view class="double-arrow"></view>
			</view>
			<view class="right_seach" v-if="type.includes(3)">
				搜索
			</view>
			<view class="right_seach" v-if="type.includes(4)">
				查看下级详情<uni-icons type="right" size="16"></uni-icons>
			</view>

			<slot name="customize"></slot>
		</view>
		<slot name="main"></slot>
	</view>
</template>

<script>
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
	export default {
		components: {
			"uni-popup": uniPopup
		},
		props: {
			header: {
				type: String,
				default: '--'
			},
			type: {
				type: String,
				default: ''
			},
			type2T: {
				type: String,
				default: '进入专题'
			},
		},
		data() {
			return {
				date: '2024', // 当前选中的日期，年份选择器通常不需要具体到日，所以可以设置为空字符串或特定格式的日期字符串
				startYear: '1900', // 年份选择器的开始年份
				endYear: '2100' // 年份选择器的结束年份
			};
		},
		methods: {
			openPopup() {
				this.$refs.popup.open(); // 打开弹出层
			},
			bindDateChange(e) {
				this.date = e.detail.value; // 获取选择的日期，这里通常是 YYYY-MM-DD 格式，但我们可以忽略 MM 和 DD 部分只获取 YYYY
				this.$emit('timeChange', e.detail.value)
			}
		}
	}
</script>

<style scoped>
	.common-card {
		width: calc(100% - 60rpx);
		margin: 0 auto;
		position: relative;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 32rpx 8rpx rgba(0, 0, 0, 0.03);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #EDEDED;
		margin-top: 30rpx;
	}

	.common-card_bg {
		width: 100%;
		height: 64rpx;
	}

	.common-card_text {
		position: absolute;
		top: 14rpx;
		left: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.common-card_right {
		position: absolute;
		display: flex;
		flex-direction: row;
		top: 14rpx;
		right: 0rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #2A8BFD;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.right_seach {
		margin-right: 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.double-arrow {
		position: relative;
		width: 24rpx;
		height: 24rpx;
	}

	.double-arrow::before,
	.double-arrow::after {
		content: '';
		position: absolute;
		top: 6rpx;
		width: 10rpx;
		height: 10rpx;
		border-top: 2rpx solid #2A8BFD;
		border-right: 2rpx solid #2A8BFD;
	}

	.double-arrow::before {
		transform: rotate(45deg);
		left: 0;
	}

	.double-arrow::after {
		transform: rotate(45deg);
		right: 0;
	}

	.popup-content {
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
	}

	.picker {
		text-align: center;
		font-size: 24rpx;
	}

	.triangle {
		margin-left: 6rpx;
		width: 0;
		height: 0;
		border-left: 9rpx solid transparent;
		/* 左侧透明 */
		border-right: 9rpx solid transparent;
		/* 右侧透明 */
		border-top: 12rpx solid #2A8BFD;
		/* 上侧为实心颜色 */
	}
</style>